<template>

	<view class="index">
		<scroll-view scroll-x="true" class="scroll-content" :scroll-into-view="scrollIntoIndex">
			<view :id="'top'+index" v-for="(item,index) in topBar" :key="index" class="scroll-item">
				<text :class="topBarIndex==index? 'f-active-color':''" @tap="barIndex(index)"
					@click="barIndex(index)">{{item.name}}</text>
			</view>
		</scroll-view>

		<swiper @change="onChangeTop" :current="topBarIndex" :style="'height:'+scrollH+'px;'">
			<swiper-item v-for="(item,index)  in topBar" :key="index">
				<view class="home-data">
					<Banner></Banner>
					<Icons></Icons>
					<indexSwiper></indexSwiper>
					<indexRecommend></indexRecommend>
					<Card cardTitle='猜你喜欢'></Card>
					<Hot></Hot>
					<Card cardTitle='商品店铺'></Card>
					<Card cardTitle='服饰内衣'></Card>
					<CommodityList></CommodityList>
					<Card cardTitle='运动户外'></Card>
					<Shop></Shop>
				</view>
			</swiper-item>

		</swiper>
		<!-- #ifdef MP-WEIXIN
		<view class="nav-top">
			<view class="iconfont icon-wode">
			</view
			<text>index</text>
			<view class="iconfont icon-wode">
			</view>
		</view>
		<!-- #endif -->


		<!-- <Banner></Banner> -->
		<!-- <Icons></Icons> -->
		<!-- <indexSwiper></indexSwiper> -->
		<!-- <indexRecommend></indexRecommend> -->
		<!-- <Card cardTitle='猜你喜欢'></Card> -->
		<!-- <Hot></Hot> -->
		<!-- <Card cardTitle='商品店铺'></Card> -->

		<!-- <Card cardTitle='服饰内衣'></Card> -->
		<!-- <CommodityList></CommodityList> -->
		<!-- <Card cardTitle='运动户外'></Card> -->
		<!-- <Shop></Shop> -->
	</view>

</template>

<script>
	import indexSwiper from '@/components/index/indexSwiper.vue'
	import indexRecommend from '@/components/index/indexRecommend.vue'
	import Card from '@/components/common/Card.vue'
	import CommodityList from '@/components/common/CommodityList.vue'
	import Banner from '@/components/index/banner.vue'
	import Icons from '@/components/index/Icons.vue'
	import Hot from '@/components/index/Hot.vue'
	import Shop from '@/components/index/Shop.vue'
	import {
		aaa
	} from '@/uni/api.js'

	export default {
		data() {
			return {
				// 索引
				topBarIndex: 0,
				scrollIntoIndex: 'top0',
				scrollH: 0,
				topBar: [{
						name: '推荐'
					},
					{
						name: '运动户外'
					},
					{
						name: '服饰内衣'
					},
					{
						name: '鞋靴箱包'
					},
					{
						name: '美妆个护'
					},
					{
						name: '家具数码'
					},
					{
						name: '饰品母婴'
					},
				]
			}
		},
		onLoad() {
			aaa().then(res => {
				console.log(res);
			})
			// uni.request({
			// 	url:'http://192.168.0.130:3000/api/index_list/data',
			// 	method:'GET',
			// 	success: (res) => {
			// 		console.log(res);
			// 	}
			// })
		},
		onReady() {
			// 获取组件的高度，赋值给父元素
			let res = uni.createSelectorQuery().select(".home-data")
			res.boundingClientRect(data => {
				this.scrollH = data.height
			}).exec()
		},
		methods: {
			barIndex(val) {
				if (this.topBarIndex == val) {
					return
				}
				this.topBarIndex = val
				this.scrollIntoIndex = 'top' + val
			},
			onChangeTop(e) {
				this.barIndex(e.detail.current)
				this.scrollIntoIndex = 'top' + e.detail.current
			}
		},
		components: {
			indexSwiper,
			indexRecommend,
			Card,
			CommodityList,
			Banner,
			Icons,
			Hot,
			Shop
		}
	}
</script>

<style scoped>
	.nav-top {
		height: 200rpx;
		width: 100%;
		line-height: 200rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.scroll-content {
		width: 100%;
		height: 80rpx;
		white-space: nowrap;

	}

	.scroll-item {
		display: inline-block;
		padding: 10rpx 20rpx;
		font-size: 30rpx
	}

	.f-active-color {
		padding-bottom: 10rpx;
		border-bottom: 6rpx solid yellow;
	}
</style>